<script>
import events from './events'

export default {
    name: 'MultiTab',
    data() {
        return {
            fullPathList: [],
            pages: [],
            activeKey: '',
            newTabIndex: 0
        }
    },
    created() {
        // bind event
        events
            .$on('open', val => {
                if (!val) {
                    throw new Error(`multi-tab: open tab ${val} err`)
                }
                this.activeKey = val
            })
            .$on('close', val => {
                if (!val) {
                    this.closeThat(this.activeKey)
                    return
                }
                this.closeThat(val)
            })
            .$on('rename', ({ key, name }) => {
                console.log('rename', key, name)
                try {
                    const item = this.pages.find(item => item.path === key)
                    item.meta.customTitle = name
                    this.$forceUpdate()
                } catch (e) {}
            })

        this.pages.push(this.$route)
        this.fullPathList.push(this.$route.fullPath)
        this.selectedLastPath()
    },
    methods: {
        onEdit(targetKey, action) {
            this[action](targetKey)
        },
        remove(targetKey) {
            this.pages = this.pages.filter(page => page.fullPath !== targetKey)
            this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
            // 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页
            if (!this.fullPathList.includes(this.activeKey)) {
                this.selectedLastPath()
            }
        },
        selectedLastPath() {
            this.activeKey = this.fullPathList[this.fullPathList.length - 1]
        },

        // content menu
        closeThat(e) {
            // 判断是否为最后一个标签页，如果是最后一个，则无法被关闭
            if (this.fullPathList.length > 1) {
                this.remove(e)
            } else {
                this.$message.info('这是最后一个标签了, 无法被关闭')
            }
        },
        closeLeft(e) {
            const currentIndex = this.fullPathList.indexOf(e)
            if (currentIndex > 0) {
                this.fullPathList.forEach((item, index) => {
                    if (index < currentIndex) {
                        this.remove(item)
                    }
                })
            } else {
                this.$message.info('左侧没有标签')
            }
        },
        closeRight(e) {
            const currentIndex = this.fullPathList.indexOf(e)
            if (currentIndex < this.fullPathList.length - 1) {
                this.fullPathList.forEach((item, index) => {
                    if (index > currentIndex) {
                        this.remove(item)
                    }
                })
            } else {
                this.$message.info('右侧没有标签')
            }
        },
        closeAll(e) {
            const currentIndex = this.fullPathList.indexOf(e)
            this.fullPathList.forEach((item, index) => {
                if (index !== currentIndex) {
                    this.remove(item)
                }
            })
        },
        closeMenuClick(key, route) {
            this[key](route)
        },
        renderTabPaneMenu(e) {
            return (
                <a-menu
                    {...{
                        on: {
                            click: ({ key, item, domEvent }) => {
                                this.closeMenuClick(key, e)
                            }
                        }
                    }}
                >
                    <a-menu-item key="closeThat">关闭当前标签</a-menu-item>
                    <a-menu-item key="closeRight">关闭右侧</a-menu-item>
                    <a-menu-item key="closeLeft">关闭左侧</a-menu-item>
                    <a-menu-item key="closeAll">关闭全部</a-menu-item>
                </a-menu>
            )
        },
        // render
        renderTabPane(title, keyPath) {
            const menu = this.renderTabPaneMenu(keyPath)

            return (
                <a-dropdown overlay={menu} trigger={['contextmenu']}>
                    <span style={{ userSelect: 'none' }}>{title}</span>
                </a-dropdown>
            )
        }
    },
    watch: {
        $route: function(newVal) {
            this.activeKey = newVal.fullPath
            if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
                this.fullPathList.push(newVal.fullPath)
                this.pages.push(newVal)
            }
        },
        activeKey: function(newPathKey) {
            this.$router.push({ path: newPathKey })
        }
    },
    render() {
        const {
            onEdit,
            $data: { pages }
        } = this
        const panes = pages.map(page => {
            return (
                <a-tab-pane
                    style={{ height: 0 }}
                    tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
                    key={page.fullPath}
                    closable={pages.length > 1}
                ></a-tab-pane>
            )
        })

        return (
            <div class="ant-pro-multi-tab">
                <div class="ant-pro-multi-tab-wrapper">
                    <a-tabs
                        hideAdd
                        type={'editable-card'}
                        v-model={this.activeKey}
                        tabBarStyle={{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }}
                        {...{ on: { edit: onEdit } }}
                    >
                        {panes}
                    </a-tabs>
                </div>
            </div>
        )
    }
}
</script>
